const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const webpack = require('webpack');

module.exports = {
    mode : 'production',
    entry : {
        index : './src/statics/js/index.js'
    },
    output : {
        filename : 'js/[name].bundle.js',
        path : path.resolve(__dirname,'./dist/'),
        publicPath : './'
    },
    module : {
        rules : [
            {
                test : /\.css$/,
                use : [{
                    loader:MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                },'css-loader']
            },
            {
                test : /\.html$/,
                loader : 'html-loader'
            },
            {
                test : /\.vue$/,
                loader : 'vue-loader'
            },
            {
                test : /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader : 'file-loader?limit=10&name=font/[hash:6].[ext]'
            },
            {
                test : /\.(png|jpg|gif)/,
                use : [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 10,
                            name: 'img/[name]_[hash:6].[ext]'
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                use : [{
                    loader:MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: '../'
                    }
                },'css-loader','less-loader']
            }
        ]
    },
    resolve : {
        alias : {
            vue : 'vue/dist/vue.min.js'
        }
    },
    plugins : [
        new CleanWebpackPlugin(),
        new BundleAnalyzerPlugin(),
        new VueLoaderPlugin(),
        new HtmlWebpackPlugin({
            title : '主页',
            filename : 'index.html',
            template : './src/statics/index.html',
            chunks: ['manifest','vendor','index']
        }),
        new MiniCssExtractPlugin({filename: 'css/[name].css'}),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin()

    ],
    // devtool : 'inline-source-map',//开发环境时使用此配置
    devtool : 'false',//生产环境时使用此配置以减小js文件的体积
    optimization:{
        runtimeChunk: {
            "name": "manifest"
        },
        splitChunks: {
            cacheGroups: {
                default: false,
                vendors: false,
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: 'initial',
                    enforce: true,
                    priority: 10,
                    name: 'vendor'
                },
                common: {
                    chunks: "all",
                    minChunks: 2,
                    name: 'common',
                    enforce: true,
                    priority: 5
                }
            }
        }
    }
}
